<template>

    <chart id="line" :option="option_column" style="height: 250px"></chart>

</template>

<script>
    export default {
        name: "ModuleLine",
        data() {
            return {
                option_column: {
                    grid: {
                        top: 30,
                        bottom:40,
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        data: ['春芽开发期','花蕾期','开花做果期','果实膨大期','果实着色期','成熟采收期'],
                        axisLabel: {
                            fontSize:'12px',
                            width:36,
                            overflow: "break",
                            interval:0,
                            color:'#ddd'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#333333 "
                            }
                        },
                        type: 'category',
                        boundaryGap: false,
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '土壤相对湿度',
                            min: 0,
                            max: 100,
                            interval: 20,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#07ffff",
                                },
                                show:true,
                            },
                            axisLabel: {
                                formatter: '{value}%',

                            },
                            nameTextStyle:{
                                width:50,
                                overflow: "break",
                            }
                        },
                        {
                            type: 'value',
                            name: '土壤相对含水量',
                            min: 0,
                            max: 100,
                            interval: 20,
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#F96A2E",
                                },
                                show:true,
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                    series: [
                        {
                            name: "土壤相对湿度",
                            type: "line",
                            data: [60, 65, 65, 78,60, 50],
                            itemStyle: {
                                color: "#07FFFF"
                            },
                            lineStyle: {
                                type: "dotted"
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(7,255,255,.5)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(0,0,0,.5)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        {
                            name: "土壤相对含水量",
                            type: "line",
                            barWidth: 5,
                            data: [18, 20, 20, 23,18, 17],
                            itemStyle: {
                                color: "#F96A2E"
                            },
                            lineStyle: {
                                type: "dotted"
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(248,115,59,.5)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(0,0,0,.5)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                    ],
                },
            }
        }
    }
</script>

<style scoped>

</style>
